<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>我的报表</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="../assets/css/amazeui.min.css?v=2.9">
    <link rel="stylesheet" href="../assets/css/style.css?v=2.3">
    <link rel="stylesheet" href="../assets/css/index.css?v=2.3">
    <link rel="stylesheet" href="../assets/css/extend.css?v=2.3">
    <link rel="stylesheet" href="../assets/css/icons.css?v=2.3">
</head>
<body class="bg-gray">

<section class="" id="amz-main" data-tag="css-nav">

    <div data-am-widget="tabs" class="am-tabs am-tabs-d2" id="tabs">
        <ul class="am-tabs-nav am-cf">
            <li class="all"><a href="#content">汇总</a></li>
            <li class="daybefore"><a href="#content" >昨天</a></li>
            <li class="weekbefore"><a href="#content" >近7天</a></li>
            <li class="monthbefore"><a href="#content" >近30天</a></li>
        </ul>
        <div class="am-tabs-bd">
            <div id="content" class="am-tab-panel ">
                <div class="am-g am-padding-top-slg am-padding-left-xs am-padding-right-xs" id="view" v-cloak>
                    <div class="am-u-sm-4 data-list">
                        <div class="layui-card">
                            <div class="max-number-font">{{view[0].now_num}}</div>
                            <div class="percentage-font">{{uppre(view[0].last_num,view[0].now_num,type)}}</div>
                            <div class="min-font">{{view[0].desc}}</div>
                        </div>
                    </div>
                    <div class="am-u-sm-4 data-list">
                        <div class="layui-card">
                            <div class="max-number-font">{{view[1].now_num}}</div>
                            <div class="percentage-font">{{uppre(view[1].last_num,view[1].now_num,type)}}</div>
                            <div class="min-font">{{view[1].desc}}</div>
                        </div>
                    </div>
                    <div class="am-u-sm-4 data-list">
                        <div class="layui-card">
                            <div class="max-number-font">{{view[2].now_num}}</div>
                            <div class="percentage-font">{{uppre(view[2].last_num,view[2].now_num,type)}}</div>
                            <div class="min-font">{{view[2].desc}}</div>
                        </div>
                    </div>
                    <div class="am-u-sm-4 data-list">
                        <div class="layui-card">
                            <div class="max-number-font">{{view[3].now_num}}</div>
                            <div class="percentage-font">{{uppre(view[3].last_num,view[3].now_num,type)}}</div>
                            <div class="min-font">{{view[3].desc}}</div>
                        </div>
                    </div>
                    <div class="am-u-sm-4 data-list">
                        <div class="layui-card">
                            <div class="max-number-font">{{view[4].now_num}}</div>
                            <div class="percentage-font">{{uppre(view[4].last_num,view[4].now_num,type)}}</div>
                            <div class="min-font">{{view[4].desc}}</div>
                        </div>
                    </div>
                    <div class="am-u-sm-4 data-list">
                        <div class="layui-card">
                            <div class="max-number-font">{{view[5].now_num}}</div>
                            <div class="percentage-font">{{uppre(view[5].last_num,view[5].now_num,type)}}</div>
                            <div class="min-font">{{view[5].desc}}</div>
                        </div>
                    </div>
                </div>
                <div class="am-g am-padding-top-slg am-padding-left-xs am-padding-right-xs">

                    <div class="am-u-sm-12 data-list-tow">
                        <div class="layui-card" id="pie" style="height: 250px;width: 100%">

                        </div>
                    </div>
                    <div class="am-u-sm-12 data-list-tow">
                        <div class="layui-card" id="bar" style="height: 250px;width: 100%">

                        </div>
                    </div>
                    <div class="am-u-sm-12 data-list-tow">
                        <div class="layui-card" id="line" style="height: 250px;width: 100%">

                        </div>
                    </div>


                </div>
            </div>
        </div>
    </div>


</section>


<script src="../assets/js/jquery.min.js"></script>
<script src="../assets/js/vue2.2.2.min.js"></script>
<script src="../assets/js/echarts.js"></script>
<script src="../assets/js/amazeui.min.js"></script>
<script src="../assets/common.js"></script>
<link rel="stylesheet" href="../assets/js/layui/css/layui.css">
<script type='text/javascript' src='../assets/js/layui/layui.js'></script>
<script>
    $("#tabs li").click(function(){
        $("#tabs li").removeClass("am-active");
        $(this).addClass("am-active");
    });
    $('.daybefore').on('click', function() {
        regetData(2);
        return;
    });
    $('.weekbefore').on('click', function() {
        regetData(3);
    });
    $('.monthbefore').on('click', function() {
        regetData(4);
    });
    $('.all').on('click', function() {
        regetData(1);
    });
    var type = 1;//  1汇总2昨日3近七天4近30天
    var sessionid = getQueryString("sessionid");
    var mask;
    layui.use('layer', function(){
        var layer = layui.layer;
    });
    var eventHub = new Vue();
    $(function () {
        setTimeout(function(){
            mask = layer.msg('正在加载', {icon: 16});
            getDta();
            dataview();
        },200)

    })
    function dataview() {
        $.ajax({
            url: baseUrl + 'v3.0/ai/index/view?type='+type,
            type: 'GET',
            contentType: 'application/json',
            //data: JSON.stringify(page),
            headers: {'session_id': sessionid},
            success: function (result) {
                layer.close(mask);
                eventHub= new Vue({
                    el: "#view",
                    data: {
                        view: result,
                        type:type
                    },
                    methods: {
                        uppre: function (a, b,t) {
                            if(t!=1){
                                if (a == 0) {
                                    return '无对比'
                                } else {
                                    return ((b - a) / a * 100).toFixed(2) + '%'
                                }
                            }
                            return ''

                        }
                    }
                })
            }
        })
    }
    function regetData(type){
        mask = layer.msg('正在加载', {icon: 16});
        $.ajax({
            url: baseUrl + 'v3.0/ai/index/view?type=' + type,
            type: 'GET',
            contentType: 'application/json',
            //data: JSON.stringify(page),
            headers: {'session_id': sessionid},
            success: function (results) {
                layer.close(mask);
                eventHub.view=results;
                eventHub.type=type;
            }
        })
    }
    function getDta() {
        $.ajax({
            url: baseUrl+'v3.0/staff/ai/analysis',
            type: 'GET',
            contentType: 'application/json',
            headers: {'session_id': sessionid},
            success: function (result) {
                layer.close(mask);
                pie(result, 'pie');
                bar(result, 'bar');
                line(result, 'line')
            }

        })
    }
    function pie(result, id) {
        var legend = [];
        for (item in result.pie) {
            legend.push(result.pie[item].name)
        }
        var optionpie = {
            legend: {
                orient: 'horizontal',
                y: 'bottom',
                data: legend
            },
            color: ['#37A2DA', '#32C5E9', '#67E0E3'],
            title : {
                text: '客户兴趣占比',
                x:'center'
            },
            calculable: true,
            series: [
                {
                    name: '访问来源',
                    type: 'pie',//类型
                    center: ['50%', '50%'],//位置
                    data: result.pie,//数据
                    radius: '65%',//大小
                    label: {
                        normal: {
                            formatter: '{d}%',
                            textStyle: {
                                fontWeight: 'normal',
                                fontSize: 15
                            }
                        }
                    }
                }
            ]
        };
        charts(optionpie, id)

    }
    function bar(result, id) {
        var legend = [];
        var data = [];
        for (item in result.bar) {
            legend.push(result.bar[item].name);
            data.push(result.bar[item].value)
        }
        var optionbar = {
            calculable: true,
            title : {
                text: '客户与我互动',
                x:'center'
            },
            color: [ '#37A2DA', '#32C5E9', '#67E0E3', '#9FE6B8', '#FFDB5C'],
            grid: {
                left: '3%',
                right: '3%',
                bottom: '3%',
                top: '20%',
                containLabel: true
            },
            xAxis: [
                {
                    type: 'value',
                    splitLine: {
                        show: false //不显示网格
                    }
                }
            ],
            yAxis: [
                {
                    type: 'category',
                    data: legend
                }
            ],
            series: [

                {
                    name: '2012年',
                    type: 'bar',
                    data: data,
                    barCategoryGap: '30%',
                    center: ['50%', '50%'],//位置
                    itemStyle : { normal: {label : {show: true}}}

                }
            ]
        };
        charts(optionbar, id)
    }
    function line(result, id) {
        var legend = [];
        var data = [];
        for (item in result.line) {
            legend.push(result.line[item].name);
            data.push(result.line[item].value)
        }
        var optionline = {
            calculable: true,
            title : {
                text: '近期15日用户活跃度',
                x:'center'
            },
            color: [ '#37A2DA'],
            grid: {
                left: '3%',
                right: '3%',
                bottom: '3%',
                top: '20%',
                containLabel: true
            },
            xAxis: [
                {
                    type: 'category',
                    data: legend
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    splitLine: {
                        show: false //不显示网格
                    }
                }
            ],
            series: [
                {
                    name: '最高气温',
                    type: 'line',
                    data: data,
                    itemStyle : { normal: {label : {show: true}}},
                    symbol:'none',  //这句就是去掉点的
                    smooth:true  //这句就是让曲线变平滑的
                }
            ]
        };
        charts(optionline, id)
    }
    function charts(option, id) {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById(id));
        // 指定图表的配置项和数据
        option = option;
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    }
</script>

</body>
</html>